
var TaskDetails = function(){

}

TaskDetails.onMouseOver = function(eventObject){
	if(TaskDetails.isnewTaskDetails){
		TaskDetails.getDataFunction();
		TaskDetails.isnewTaskDetails = false;
	} 
	if(TaskDetails.isData){
		TaskDetails.renderDetailPage(eventObject);
	}else{
		callback = function(){
			TaskDetails.onMouseOver(eventObject);
		}
		setTimeout(callback,500);
	}

}

TaskDetails.renderDetailPage = function(eventObject){
	var target = eventObject.target;
	TaskDetails.currentPhaseTarget = target;
	cat = target.getAttribute("phase");
	TaskDetails.showDetails(eventObject);
	TaskDetails.renderSideBar(cat);
	TaskDetails.updateDeatilsPos(cat);

}


TaskDetails.makePhaseActive = function(phase){
	var phaseDiv = document.querySelector(".pbox[phase="+phase +"]");
	phaseDiv.classList.remove("pbox-deactive");
	phaseDiv.classList.add("pbox-active");
}
TaskDetails.makePhaseDeActive = function(phase){
	var phaseDiv = document.querySelector(".pbox[phase="+phase +"]");
	phaseDiv.classList.remove("pbox-active");
	phaseDiv.classList.add("pbox-deactive");
}

TaskDetails.makePhaseNormal = function(phase){
	var phaseDiv = document.querySelector(".pbox[phase="+phase +"]");
	phaseDiv.classList.remove("pbox-active");
	phaseDiv.classList.remove("pbox-deactive");
}

TaskDetails.makeArrowDeActive = function(arrowClass){

		var arrow = document.querySelector(arrowClass);
		arrowLine = arrow.querySelector(".arrow-line");
		arrowLine.classList.add("arrow-deactive-line");
		arrowHead = arrow.querySelector(".arrow-head");
		arrowHead.classList.add("arrow-deactive-head");
};

TaskDetails.makeArrowActive = function(arrowClass){

		var arrow = document.querySelector(arrowClass);
		arrowLine = arrow.querySelector(".arrow-line");
		arrowLine.classList.remove("arrow-deactive-line");
		arrowHead = arrow.querySelector(".arrow-head");
		arrowHead.classList.remove("arrow-deactive-head");
};

TaskDetails.onMouseOut = function(eventObject){
	if(TaskDetails.detailDiv){
		var detailPage = TaskDetails.detailDiv;
		detailPage.style.display = "none";
	}
}



TaskDetails.renderSideBar = function(cat){
	var detailPart = TaskDetails.detailDiv;
	detailPart = detailPart.firstElementChild;
	taskInfo = detailPart.querySelectorAll(".taskinfo");
	var foundTask = false;
	for(var j = 0 ; j< taskInfo.length ; j++){
	detailPart.removeChild(taskInfo[j]);
	}
	var template = 	"<div class='taskinfo-summary float-left su'>summary</div>"+
					"<div class='taskinfo-status float-left ts'></div>"+
					"<div class='taskinfo-item float-left sd'></div>"+
					"<div class='taskinfo-item float-left ed'></div>" ;
			
	for(i in TaskDetails.tasks){
		var task = TaskDetails.tasks[i]
		if(task.phase  == cat ){
			var item = document.createElement("div");
			item.setAttribute("class","taskinfo");
			item.innerHTML = template;
			var ts = item.querySelector(".ts");
			var sd = item.querySelector(".sd");
			var ed = item.querySelector(".ed");
			var su = item.querySelector(".su");
			var statusObj = {
				"Waiting" : {
					"message" : "Waiting", "className": "waiting"
				},
				"Inprogress" : {
					"message" : "In Progress", "className": "progress"
				},
				"Completed" : {
					"message" : "Completed", "className": "completed"
				},
				"NotOk" : {
					"message" : "Not OK", "className": "notok"
				}				
			}
			ts.innerHTML = statusObj[task.status]["message"];
			ts.classList.add(statusObj[task.status]["className"]);
			sd.innerHTML = "Start : " + ((task.startDate=="")?"---":task.startDate);
			ed.innerHTML = "End : " + ((task.endDate=="")?"---":task.endDate);
			su.innerHTML = task.summary;
			detailPart.appendChild(item);
			foundTask =true;
			
		}
	}
	if(!foundTask){
		TaskDetails.hideDetails();
	}
}

TaskDetails.setData = function(xmlDoc){
	TaskDetails.tasks = {};
	var currentPhase = "Precondition";
	var currentPhaseDate = null
	
	var tuples =xmlDoc.getElementsByTagName("tuple");
	for(var i = 0; i< tuples.length ; i++){
	var tuple = tuples[i];
	var id = tuples[i].getElementsByTagName('TaskID')[0].textContent;
	TaskDetails.tasks[id] = {};
	var endDate = tuples[i].getElementsByTagName('EndDate')[0].textContent;
	TaskDetails.tasks[id].endDate = endDate;
	var startDate = tuples[i].getElementsByTagName('StartDate')[0].textContent;
	TaskDetails.tasks[id].startDate = startDate;
	var Phase = tuples[i].getElementsByTagName('Phase')[0].textContent;
	TaskDetails.tasks[id].phase = Phase;
	var summary = tuples[i].getElementsByTagName('SummaryDescription')[0].textContent;
	TaskDetails.tasks[id].summary = summary;
	var status = tuples[i].getElementsByTagName('ExecutionControl')[0].textContent;
	TaskDetails.tasks[id].status = status;
	var splitDate = endDate.split("-");
	if(splitDate.length ==3){
		var date=new Date();
		date.setFullYear(parseInt(splitDate[0]),splitDate[1],parseInt(splitDate[2]));
		if(currentPhaseDate){
			if((date - currentPhaseDate) > 0 ){
				currentPhaseDate = date;
				currentPhase = Phase;
			}
		}else{
			currentPhaseDate = date;
			currentPhase = Phase;
		}
	}
  }
  TaskDetails.isData = true;

};

TaskDetails.initTaskDetailView = function(container,width,height,getDataFunction){
	TaskDetails.getDataFunction = getDataFunction;
	var viewHTML = 	"<div class= 'container'>"+
						"<div class='flowname'>Execution progress</div>" + 
						"<div class = 'mainflow'>"+
							"<div class ='outerpbox pb1' >"+
								"<div class='pbox' onmouseout='TaskDetails.onMouseOut(event)' onmouseover='TaskDetails.onMouseOver(event)' phase='Precondition'>"+
									"Precondition"+
								"</div>"+
							"</div>"+
							"<div class = 'arrow ar1'>"+
								"<div class='arrow-line'></div>"+
								"<div class='arrow-head'></div>"+
							"</div>"+
							"<div class ='outerpbox pb2'>"+
								"<div class='pbox' onmouseout='TaskDetails.onMouseOut(event)' onmouseover='TaskDetails.onMouseOver(event)' phase='Execution' >"+
									"Execution"+
								"</div>"+
							"</div>" +
							"<div class = 'arrow ar2'>"+
								"<div class='arrow-line'></div>"+
								"<div class='arrow-head'></div>"+
							"</div>"+
							"<div class ='outerpbox pb3'>"+
								"<div class='pbox' onmouseout='TaskDetails.onMouseOut(event)' onmouseover='TaskDetails.onMouseOver(event)' phase='Approval' >"+
									"Approval"+
								"</div>"+
							"</div>"+
							"<div class = 'arrow ar3'>"+
								"<div class='arrow-line'></div>"+
								"<div class='arrow-head'></div>"+
							"</div>"+
							"<div class ='outerpbox pb4'>"+
								"<div class='pbox' onmouseout='TaskDetails.onMouseOut(event)' onmouseover='TaskDetails.onMouseOver(event)' phase='Finalization' >"+
									"Finalization"+
								"</div>"+
							"</div>"+
						"</div>";
				"</div>";
				container.innerHTML = viewHTML;
				

}

TaskDetails.showDetails = function(eventObject){
	TaskDetails.detailDiv = window.top.document.querySelector("#desktop").contentWindow.document.querySelector(".details");
	if(!TaskDetails.detailDiv){
		var detailsHTML = 	"<div class='itemholder'>"+
							"</div>"+
							"<div class='popup-arrow-head'>"+
							"</div>";
							
		var detailNode = document.createElement("div");
		detailNode.setAttribute("class","details");
		detailNode.innerHTML = detailsHTML;
		window.top.document.getElementById("desktop").contentWindow.document.body.appendChild(detailNode);
		//document.body.appendChild(detailNode);
		TaskDetails.detailDiv = detailNode;
	}
	var target = eventObject.target;
	var detailPage = TaskDetails.detailDiv;
	detailPage.style.display = "block";
	var top = 0;
	currentDiv = target;
	while(currentDiv && currentDiv!= document.body){
		if(currentDiv.offsetTop){
			top	+= currentDiv.offsetTop;
		}
		currentDiv = currentDiv.offsetParent;
	}
	
	detailPage.style.top = top + "px";
	var arrow = detailPage.querySelector(".popup-arrow-head");
	arrow.style.top = 20 + "px";
	
}
TaskDetails.hideDetails = function(){
	if(TaskDetails.detailDiv){
		TaskDetails.detailDiv.style.display = "none";
	}
}

TaskDetails.updateDeatilsPos  = function(cat){
	if(cat == "Approval" || cat == "Finalization" ){
		var detailPage = TaskDetails.detailDiv;
		var height = detailPage.offsetHeight;
		var newTop  = (parseInt(detailPage.style.top) -height +60) + "px";
		detailPage.style.top = newTop;
		var arrow = detailPage.querySelector(".popup-arrow-head");
		arrow.style.top = height -50 + "px";
	}

}


TaskDetails.setActivePhase = function(currentPhase){
	var phases = ["Precondition","Execution","Approval","Finalization"];
	var foundActiveState = false;
	for(var i=0;i<phases.length ; i++){
		if(phases[i] == currentPhase){
			TaskDetails.makePhaseActive(currentPhase);
			if(i>0){
				TaskDetails.makeArrowActive(".ar" +(i));
			}
			foundActiveState = true;
		}else if(foundActiveState == true){
			TaskDetails.makePhaseDeActive(phases[i]);
			if((i)>0){
				TaskDetails.makeArrowDeActive(".ar" +(i));
			}
		}else{
			if(i>0){
				TaskDetails.makeArrowActive(".ar" +(i));
			}
			TaskDetails.makePhaseNormal(phases[i]);
		}
	}
	TaskDetails.isnewTaskDetails = true;
	TaskDetails.isData = false;
}



scriptCallback && scriptCallback("PSV");

